<template>
 <view class="uni-header">
    <uni-stat-breadcrumb class="uni-stat-breadcrumb-on-phone" />
  </view>

  <view class="uni-container">
    <uni-forms :rules="rules" class="uni-forms" ref="form" :modelValue="formData" validateTrigger="bind">
      <uni-forms-item name="name" label="角色名称" required>
        <uni-easyinput placeholder="请输入角色名称" v-model="formData.name" trim="both" :clearable="false" />
      </uni-forms-item>
      <uni-forms-item name="description" label="角色描述" required>
        <uni-easyinput type="textarea" v-model="formData.description" placeholder="请输入角色描述" />
      </uni-forms-item>
      <uni-forms-item class="flex-center-x" name="authList" label="角色权限" required>
        <uni-data-checkbox multiple v-model="formData.authList" :localdata="authList"></uni-data-checkbox>
      </uni-forms-item>
      
      
      <view class="uni-button-group">
        <button type="primary" class="uni-button" style="width: 100px;"
          @click="submitForm">{{$t('common.button.submit')}}</button>
        <navigator open-type="navigateBack" style="margin-left: 15px;">
          <button class="uni-button" style="width: 100px;">返回</button>
        </navigator>
      </view>
    </uni-forms>
  </view>
  <fix-window />

</template>

<script>
  import {
    mapActions
  } from 'vuex'
  export default {
    data() {
      return {
        rules: {
          name: {
            rules: [{
                required: true,
                errorMessage: '请输入名称',
              },
              {
                minLength: 2,
                maxLength: 50,
                errorMessage: '名称长度在 {minLength} 到 {maxLength} 个字符',
              },
            ]
          },
          description: {
            rules: [{
              minLength: 1,
              maxLength: 512,
              errorMessage: '名称长度在 {minLength} 到 {maxLength} 个字符',
            }, ]
          },
          authList: {
            rules: [{
              required: true,
              errorMessage: '请选择权限',
            }]
          }
        },
        formData: {},
        authList: [],
      }
    },
    onLoad(params) {
      this.buildPage(params)
    },
    methods: {
      ...mapActions({
        getRoleForm: "role/form",
        saveRole: "role/save",
      }),
      async buildPage(params = {}) {
        uni.showLoading({
          mask: true,
        })

        let data = await this.getRoleForm(params);

        data.authList.map(item => {
          item.text = item.name;
          item.value = item.id;
        });
        this.authList = data.authList;

        this.formData = data.entity;

        uni.hideLoading()
      },
      submitForm() {
        uni.showLoading({
          mask: true
        })

        this.$refs.form.validate().then(data => {

          data.id = this.formData.id || 0;
          this.saveRole(data).then(res => {
            uni.showModal({
              title: "提示",
              content: "操作成功",
              confirmText: "继续添加",
              cancelText: "返回",
              success: (e) => {
                if (e.cancel) {
                  this.back()
                } else {
                  this.buildPage()
                }
              }
            })
          }).finally(_ => {
            uni.hideLoading()
          })
        }).catch(() => {
          uni.hideLoading()
        })
      },
    }
  }
</script>